import { observable, action, toJS, computed, autorun } from 'mobx';
import * as CONST from 'common/const';
import Base from 'stores/models/core/base';
import { findProject } from 'common/utils/store';

export default class Simulator extends Base {
  @observable target = 'TB';
  @observable w = CONST.PAGE_WIDTH; // 真实高度
  @observable h = CONST.PAGE_HEIGHT;
  @observable left = 0; // left是相对于窗口的值
  @observable top = 0;
  @observable right = 0;
  @observable bottom = 0;
  @observable scale = .5;
  @observable scrollTop = 0;
  @observable windowHeight = window.innerHeight;
  @observable windowChangedX = 0; // window resize 后更改的 X 值，用于计算 设置区的左间距
  @observable windowChangedY = 0; // window resize 后更改的 Y 值
  @observable anchorShow = false; // 是否显示锚点


  windowOriginSize = {
    width: window.innerWidth,
    height: window.innerHeight,
  };

  // 缩放后显示的宽度
  @computed get width() {
    return this.w * this.scale;
  }

  // 缩放后显示的高度
  @computed get height() {
    return this.h * this.scale;
  }

  // 滚动区域高度
  @computed get scrollAreaHeight() {
    return this.windowHeight - CONST.HEADER_HEIGHT;
  }

  // 滚动区域内部高度 - 规避缩放区域真实高度问题
  @computed get scrollInnerHeight() {
    const project = findProject(this);
    const _wh = this.scrollAreaHeight;
    // _pageHeight 是真实高度
    const _pageHeight = project.currentPages.current.height || this.h;
    // CONST.HEADER_HEIGHT 也是模拟器下虚线边框至底部的间距
    const _innerHeight = _pageHeight * this.scale + CONST.HEADER_HEIGHT + CONST.DRAG_BAR_HEIGHT + CONST.SPACER + CONST.SIMULATOR_MARGIN_TOP;
    return _innerHeight > _wh ? _innerHeight : _wh;
  }

  @action setOffset( { left, top, right, bottom } ) {
    this.left = left;
    this.top = top;
    this.right = right;
    this.bottom = bottom;
  }

  @action setScrollTop(val) {
    this.scrollTop = val;
  }

  @action updateWindowHeight() {
    this.windowHeight = window.innerHeight;

    this.windowChangedX = this.windowOriginSize.width - window.innerWidth;
    this.windowChangedY = this.windowOriginSize.height - window.innerHeight;
  }

  @action anchor() {
    this.anchorShow = !this.anchorShow;
  }

}
